<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能营养管理系统</title>
    <style>
        /* 基本样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .navbar {
            background-color: #007bff;
            color: white;
            padding: 1rem 0;
            margin-bottom: 2rem;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }

        .hero-section {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 3rem 0;
            border-radius: 10px;
            margin-bottom: 2rem;
            text-align: center;
        }

        .display-4 {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .lead {
            font-size: 1.25rem;
            margin-bottom: 2rem;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: -15px;
        }

        .col-md-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
            padding: 15px;
        }

        .col-12 {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 15px;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 1.5rem;
            margin-bottom: 1rem;
            height: 100%;
        }

        .card-body {
            padding: 1.5rem;
        }

        .text-center {
            text-align: center;
        }

        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            margin: 0.25rem;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }

        .btn-outline-primary {
            background-color: transparent;
            color: #007bff;
            border: 2px solid #007bff;
        }

        .btn-outline-primary:hover {
            background-color: #007bff;
            color: white;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .btn-info {
            background-color: #17a2b8;
            color: white;
        }

        .btn-lg {
            padding: 1rem 2rem;
            font-size: 1.125rem;
        }

        .feature-item {
            text-align: center;
            padding: 1rem;
        }

        .feature-item i {
            font-size: 3rem;
            color: #007bff;
            margin-bottom: 1rem;
        }

        .feature-item h5 {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .text-muted {
            color: #6c757d;
        }

        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 1rem; }
        .mb-4 { margin-bottom: 1.5rem; }

        .d-flex {
            display: flex;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .gap-3 {
            gap: 1rem;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .justify-content-center {
            justify-content: center;
        }

        .bg-light {
            background-color: #f8f9fa;
        }

        @media (max-width: 768px) {
            .col-md-4 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .display-4 {
                font-size: 2rem;
            }

            .d-flex {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="/">🍃 智能营养管理系统</a>
        </div>
    </nav>

    <div class="container">
        <!-- 欢迎横幅 -->
        <div class="hero-section bg-gradient-primary text-white py-5 mb-4 rounded">
            <div class="container text-center">
                <h1 class="display-4 fw-bold mb-3">
                    <i class="fas fa-leaf me-3"></i>智能营养管理系统
                </h1>
                <p class="lead mb-4">科学饮食，健康生活，让AI为您的营养保驾护航</p>
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="row text-center">
                            <div class="col-md-4 mb-3">
                                <div class="feature-item">
                                    <i class="fas fa-brain fa-2x mb-2"></i>
                                    <h5>智能推荐</h5>
                                    <p class="small">基于AI算法的个性化菜品推荐</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="feature-item">
                                    <i class="fas fa-chart-line fa-2x mb-2"></i>
                                    <h5>营养跟踪</h5>
                                    <p class="small">实时监控营养摄入和目标达成</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="feature-item">
                                    <i class="fas fa-bell fa-2x mb-2"></i>
                                    <h5>智能预警</h5>
                                    <p class="small">营养不均衡时及时提醒调整</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户登录状态判断 -->
        <div th:if="${user != null}">
            <!-- 已登录用户的主页内容 -->
            <div class="row">
                <div class="col-12">
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h5 class="mb-1">
                                <span th:text="${user.username}">用户</span>，欢迎回来！
                            </h5>
                            <p class="text-muted mb-3">开始您的健康饮食之旅</p>
                            <div class="d-flex gap-2 flex-wrap">
                                <a href="/meals" class="btn btn-primary">
                                    <i class="fas fa-utensils me-2"></i>智能点餐
                                </a>
                                <a href="/nutrition/dashboard" class="btn btn-success">
                                    <i class="fas fa-chart-line me-2"></i>营养仪表盘
                                </a>
                                <a href="/alerts" class="btn btn-warning">
                                    <i class="fas fa-bell me-2"></i>预警中心
                                </a>
                                <a href="/profile" class="btn btn-info">
                                    <i class="fas fa-user me-2"></i>个人中心
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:if="${user == null}">
            <!-- 未登录用户的主页内容 -->
            <div class="row">
                <div class="col-12">
                    <div class="card text-center mb-4">
                        <div class="card-body py-5">
                            <h3 class="mb-3">开始您的健康饮食之旅</h3>
                            <p class="text-muted mb-4">登录或注册以享受个性化的营养管理服务</p>
                            <div class="d-flex justify-content-center gap-3">
                                <a href="/login" class="btn btn-primary btn-lg">
                                    <i class="fas fa-sign-in-alt me-2"></i>立即登录
                                </a>
                                <a href="/register" class="btn btn-outline-primary btn-lg">
                                    <i class="fas fa-user-plus me-2"></i>免费注册
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
            // 页面加载完成后的初始化
            document.addEventListener('DOMContentLoaded', function() {
                // 如果用户已登录，加载用户数据
                if (document.querySelector('.user-dashboard')) {
                    loadUserDashboardData();
                }
                
                // 添加平滑滚动效果
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function (e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            target.scrollIntoView({
                                behavior: 'smooth'
                            });
                        }
                    });
                });
            });
            
            // 加载用户仪表盘数据
            function loadUserDashboardData() {
                // 加载今日营养进度
                fetch('/nutrition/api/progress')
                    .then(response => response.json())
                    .then(data => {
                        updateNutritionProgress(data);
                    })
                    .catch(error => {
                        console.error('Error loading nutrition progress:', error);
                    });
                
                // 加载营养预警
                fetch('/alerts/api/current')
                    .then(response => response.json())
                    .then(data => {
                        updateAlertStatus(data);
                    })
                    .catch(error => {
                        console.error('Error loading alerts:', error);
                    });
            }
            
            // 更新营养进度显示
            function updateNutritionProgress(progress) {
                // 更新卡路里进度
                updateProgressBar('calories-progress', progress.caloriesProgress);
                updateProgressText('calories-text', progress.caloriesActual, progress.caloriesGoal, 'kcal');
                
                // 更新蛋白质进度
                updateProgressBar('protein-progress', progress.proteinProgress);
                updateProgressText('protein-text', progress.proteinActual, progress.proteinGoal, 'g');
                
                // 更新碳水化合物进度
                updateProgressBar('carbs-progress', progress.carbsProgress);
                updateProgressText('carbs-text', progress.carbsActual, progress.carbsGoal, 'g');
                
                // 更新脂肪进度
                updateProgressBar('fat-progress', progress.fatProgress);
                updateProgressText('fat-text', progress.fatActual, progress.fatGoal, 'g');
            }
            
            // 更新进度条
            function updateProgressBar(elementId, progress) {
                const progressBar = document.getElementById(elementId);
                if (progressBar) {
                    const percentage = Math.min(progress, 100);
                    progressBar.style.width = percentage + '%';
                    progressBar.setAttribute('aria-valuenow', percentage);
                    
                    // 根据进度设置颜色
                    progressBar.className = 'progress-bar ' + getProgressBarClass(progress);
                }
            }
            
            // 更新进度文本
            function updateProgressText(elementId, actual, goal, unit) {
                const textElement = document.getElementById(elementId);
                if (textElement) {
                    textElement.textContent = `${actual.toFixed(1)} / ${goal.toFixed(1)} ${unit}`;
                }
            }
            
            // 获取进度条颜色类
            function getProgressBarClass(progress) {
                if (progress < 50) return 'bg-danger';
                if (progress < 80) return 'bg-warning';
                if (progress <= 100) return 'bg-success';
                return 'bg-info';
            }
            
            // 更新预警状态
            function updateAlertStatus(alertData) {
                const alertBadge = document.getElementById('alert-badge');
                const alertIcon = document.getElementById('alert-icon');
                
                if (alertBadge && alertIcon) {
                    if (alertData.hasAlerts) {
                        alertBadge.textContent = alertData.alertCount;
                        alertBadge.style.display = 'inline';
                        
                        if (alertData.highPriorityCount > 0) {
                            alertIcon.className = 'fas fa-exclamation-triangle text-danger';
                        } else if (alertData.mediumPriorityCount > 0) {
                            alertIcon.className = 'fas fa-exclamation-circle text-warning';
                        } else {
                            alertIcon.className = 'fas fa-info-circle text-info';
                        }
                    } else {
                        alertBadge.style.display = 'none';
                        alertIcon.className = 'fas fa-check-circle text-success';
                    }
                }
            }
        </script>
    </div>
</body>
</html>
